<template>
	<view class="userinfo_box">
		<!-- 头像背景、 头像 -->
		<view class="avatar_box">
			<image :src="userInfo.avatarUrl" mode="" />
			<view class="nickname">{{ userInfo.nickName }}</view>
		</view>
		
		<!-- 收藏的店铺或关注商品 -->
		<view class="collect_box">
			<view class="item">
				<!-- <text>{{ count }}</text>
				<text>{{ text }}</text> -->
				<text>34</text>
				<text class="item_name">收藏的店铺</text>
			</view>
			<view class="item">
				<text>23</text>
				<text class="item_name">关注的店铺</text>
			</view>
			<view class="item">
				<text>22</text>
				<text class="item_name">收藏的商品</text>
			</view>
			<view class="item">
				<text>83</text>
				<text class="item_name">足迹</text>
			</view>
		</view>
		
		<!-- 我的订单 -->
		<view class="order_box">
			<view class="order_title">我的订单</view>
			<view class="order_item_box">
				<view class="order_item">
					<uni-icons type="cart-filled" size="24" color="#409eff" />
					<text>待付款</text>
				</view>
				<view class="order_item">
					<uni-icons type="compose" size="24" color="#409eff" />
					<text>待收货</text>
				</view>
				<view class="order_item">
					<uni-icons type="images-filled" size="24" color="#409eff" />
					<text>退款/退货</text>
				</view>
				<view class="order_item">
					<uni-icons type="heart-filled" size="24" color="#409eff" />
					<text>全部订单</text>
				</view>
			</view>
		</view>
		
		<!-- 操作 -->
		<view class="oprate_box">
			<view class="oprate_item">
				<text>收货地址</text>
				<uni-icons type="arrowright" size="12px" />
			</view>
			<view class="oprate_item">
				<text>联系客服</text>
				<uni-icons type="arrowright" size="12px" />
			</view>
			<view class="oprate_item" @click="logout">
				<text>退出登录</text>
				<uni-icons type="arrowright" size="12px" />
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:"userinfo-component",
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('store_user', ['userInfo'])
		},
		methods: {
			...mapMutations('store_user', ['updateAddrs', 'updateUserInfo', 'updateToken']),
			
			// 处理用户注销事件
			clearUser() {
				this.updateAddrs('{}')
				this.updateUserInfo('{}')
				this.updateToken('')
			},
			
			// 点击【退出登录时触发】
			async logout() {
				const [err, success] = await uni.showModal({
					title: '提示',
					content: '确认退出登录？'
				}).catch(err => err)
				
				success && success.confirm ? this.clearUser() : false
			}
		}
	}
</script>

<style lang="scss">
	.userinfo_box {
		width: 100%;
		height: 460rpx;
		background-color: #409eff;
		position: relative;
		.avatar_box {
			width: 180rpx;
			height: 180rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}
		}
		.nickname {
			color: #fff;
			text-align: center;
		}
		.collect_box {
			width: 90%;	
			margin: 0 auto;
			padding: 10rpx 5rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			background-color: #fff;
			border-radius: 10px;
			position: absolute;
			top: 410rpx;
			left: 50%;
			transform: translateX(-50%);
			.item {
				width: 25%;
				display: flex;
				flex-direction: column;
				text-align: center;
				// border: 1px solid #000;
				.item_name {
					font-size: 11px;
				}
			}
		}
		.order_box {
			width: 90%;
			padding: 15rpx 10rpx 10rpx;
			background-color: #fff;
			border-radius: 10px;
			position: absolute;
			top: 530rpx;
			left: 50%;
			transform: translateX(-50%);
			.order_title {
				font-size: 14px;
				padding: 5px;
				border-bottom: 1px solid #C0C4CC;
			}
			.order_item_box {
				width: 100%;
				display: flex;
				flex-direction: row;
				text-align: center;
				padding-top: 10rpx;
				.order_item {
					width: 25%;
					display: flex;
					flex-direction: column;
					text-align: center;
					align-items: center;
					text {
						font-size: 12px;
					}
				}
			}
		}
		.oprate_box {
			width: 90%;
			padding: 10px 5px;
			background-color: #FFFFFF;
			border-radius: 10px;
			position: absolute;
			top: 730rpx;
			left: 50%;
			transform: translateX(-50%);
			.oprate_item {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 2px;
				text {
					font-size: 14px;
				}
			}
		}
	}
</style>
